<template>
    <el-dialog :visible.sync="show" title="复制产品" center :before-close="cancel" width="60%">
        <div class="table-container" v-loading.fullscreen="loadingSubmit" element-loading-text="提交中，请稍后">
            <el-row class="search_wrap">
                <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
                    <el-form-item label="源商户" prop="businessId">
                        <el-select v-model="filters.businessId" clearable filterable @change="() => {
                            handleBusinessChange()
                            filters.businessId && getDepartList(1)
                        }">
                            <el-option v-for="item in businessListOne" :value="item.id" :label="item.name" :key="item.id">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门" prop="departIds">
                        <el-cascader @change="handleBusinessChange" v-model="filters.departIds" :options="departList"
                            clearable :props="{ value: 'departId', label: 'departName', checkStrictly: true }">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="目标商户" prop="businessId">
                        <el-select v-model="filters.targetBusinessId" clearable filterable @change="() => {
                            handleBusinessChange()
                            filters.targetBusinessId && getDepartList(2)
                        }">
                            <el-option v-for="item in businessListTwo" :value="item.id" :label="item.name" :key="item.id">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="目标部门" prop="mDepartIds">
                        <el-cascader v-model="filters.mDepartIds" :options="mDepartList" clearable
                            :props="{ value: 'departId', label: 'departName', checkStrictly: true }">
                        </el-cascader>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row class="opration_wrap" style="justify-content: start;">
                <el-radio-group v-model="filters.type">
                    <el-radio :label="1" :key="1">
                        全部
                    </el-radio>
                    <el-radio :label="2" :key="2">
                        多选
                    </el-radio>
                </el-radio-group>

            </el-row>
            <el-row>
                <div>

                </div>
                <el-table max-height="500" ref="tableList" :data="dataList" :fit="true" highlight-current-row
                    v-loading="listLoading" @selection-change="handleSelectionChange" element-loading-text="数据加载中，请稍后..."
                    empty-text="对不起，没有找到相关数据！">
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column align="center" label="产品编号" prop="serverCode">
                    </el-table-column>
                    <el-table-column align="center" label="产品图片" width="160">
                        <template slot-scope="scope">
                            <div class="img-wrapper">
                                <el-image title="点击可预览" fit="cover" :src="scope.row.mainImage"
                                    :preview-src-list="[scope.row.mainImage]" :z-index="scope.$index">
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="产品名称" prop="name">
                    </el-table-column>
                    <el-table-column align="center" label="产品分类">
                        <template slot-scope="scope">
                            {{ scope.row.serverClassifyName }}-{{ scope.row.thirdClassifyName }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="规格">
                        <template slot-scope="scope">
                            <el-tag effect="dark" size="mini" v-if="scope.row.variantState == 1">
                                单品
                            </el-tag>
                            <el-tag type="success" size="mini" effect="dark" v-else>
                                多规格
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="上门/到店/远程/紧急通知" width="120">
                        <template slot-scope="scope">
                            <div>
                                <el-tag size="mini" effect="dark" v-if="scope.row.visitFlag == 1">
                                    上门
                                </el-tag>
                                <el-tag size="mini" effect="dark" v-if="scope.row.shopFlag == 1" type="success">
                                    到店
                                </el-tag>
                                <div></div>
                                <el-tag size="mini" effect="dark" v-if="scope.row.remoteFlag == 1" type="warning">
                                    远程
                                </el-tag>
                                <el-tag size="mini" effect="dark" v-if="scope.row.fastFlag == 1" type="danger">
                                    急
                                </el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否需配送费" width="120">
                        <template slot-scope="scope">
                            <div>
                                <el-tag size="mini" effect="dark" v-if="scope.row.deliveryFlag == 0" type="info">
                                    否
                                </el-tag>
                                <el-tag size="mini" effect="dark" v-if="scope.row.deliveryFlag == 1">
                                    是
                                </el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="商户" prop="businessName"></el-table-column>
                    <el-table-column align="center" label="部门" prop="departName"></el-table-column>
                    <el-table-column align="center" label="原价" prop="price"></el-table-column>
                    <el-table-column align="center" label="售价" prop="salePrice"></el-table-column>
                    <el-table-column align="center" label="包装费" prop="packageFee"></el-table-column>
                    <el-table-column align="center" label="商户折扣比例" prop="discount" width="120"></el-table-column>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageNo" :page-sizes="[20, 100, 500]" :page-size="page.pageSize"
                    layout="total, sizes, jumper, next, pager, prev" :total="page.pageTotal"></el-pagination>
            </el-row>


        </div>
        <div slot="footer">
            <el-button type="primary" @click="submit">
                提交
            </el-button>
            <el-button @click="cancel">
                取消
            </el-button>
        </div>
        
    </el-dialog>
</template>

<script>
import BusinessApi from "@/api/business/business";
import BusinessServerApi from "@/api/goods/businessServer"
import BusinessDepartApi from '@/api/business/depart'
import ServerClassifyApi from '@/api/server/serverClassify'
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
           
            departList: [],
            dataList: [],
            mDepartList: [],
            filters: {
                businessId: "",
                targetBusinessId: "",
                type: 2,
                mDepartIds: [],
                departIds: []
            },
            page: {
                pageNo: 1,
                pageTotal: 0,
                pageSize: 20
            },
            businessList: [],
            listLoading: false,
            selectedList: [

            ],
            loadingSubmit: false,
           
        }
    },
    computed: {
        businessListOne() {
            return this.businessList
        },
        businessListTwo() {
            return this.businessList
        }
    },
    
    mounted() {
        this.getBusinessList()
    },
    methods: {
        getDepartList(i) {
            let params = {
                businessId: i === 1 ? this.filters.businessId : this.filters.targetBusinessId
            }
            BusinessDepartApi.listMangerTree(params).then(res => {
                if (i === 1) {
                    this.departList = res.data
                } else if (i === 2) {
                    this.mDepartList = res.data
                }
            })
        },
        // 获取商户列表
        getBusinessList() {
                BusinessApi.listIdNameVo().then(res => {
                    this.businessList = res.data
                })
        },
        handleBusinessChange() {
            if (!this.filters.businessId) {
                this.departList = []
                this.filters.departIds = []
            }
            if (!this.filters.targetBusinessId) {
                this.mDepartList = []
                this.filters.mDepartIds = []
            }
            if (!this.filters.businessId || !this.filters.targetBusinessId) {
                this.dataList = []
            } else {
                this.listData()
            }
        },
        handleSelectionChange(val) {
            this.selectedList = val
        },
        handleSizeChange(size) {
            this.page.pageSize = size
            this.listData()
        },
        handleCurrentChange(val) {
            this.page.pageNo = val
            this.listData()
        },
        submit() {
            if (!this.filters.businessId) {
                this.$message.error("请选择源商户")
                return
            }

            if (this.selectedList.length == 0 && this.filters.type == 2) {
                this.$message.error("请至少选择一项")
                return
            }

            if (!this.filters.targetBusinessId) {
                this.$message.error("请选择目标商户")
                return
            }
            if (this.filters.type == 1 && this.dataList.length == 0) {
                this.$message.error("该商户没有产品可复制")
                return
            }

            let params = {
                businessId: this.filters.businessId,
                targetBusinessId: this.filters.targetBusinessId,
                departId: this.filters.mDepartIds[0] || '',
                firstDepartId: this.filters.mDepartIds[1] || '',
                secondDepartId: this.filters.mDepartIds[2] || '',
                thirdDepartId: this.filters.mDepartIds[3] || '',
            }
            if (this.filters.type == 1) {
                params.all = true
            } else {
                params.all = false
                params.serverIds = this.selectedList.map(item => item.serverId)
            }

            this.$confirm(this.filters.type == 1 ? "确认复制全部产品吗？" : "确认复制选中产品吗？", "提示", {}).then(() => {
                this.loadingSubmit = true
                BusinessServerApi.copyServer(params).then(res => {
                    this.$Utils.notifySuccess("复制成功")
                    this.$emit("confirm")
                }).finally(() => {
                    this.loadingSubmit = false
                })
            })

        },
        listData() {
            let params = {
                pageNo: this.page.pageNo,
                pageSize: this.page.pageSize,
                businessId: this.filters.businessId,
                targetBusinessId: this.filters.targetBusinessId,
                departId: this.filters.departIds[0] || '',
                firstDepartId: this.filters.departIds[1] || '',
                secondDepartId: this.filters.departIds[2] || '',
                thirdDepartId: this.filters.departIds[3] || '',
            }
            BusinessServerApi.listBusinessServer(params).then(res => {
                this.dataList = res.data.list
                this.page.pageTotal = res.data.total
            })
        },
        cancel() {
            this.$emit("cancel")
        },
    },
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/views/table.scss";
</style>
<style lang="scss">
.el-dialog__wrapper {
    .el-dialog__body {
        padding: 10px 25px !important;
    }
}
</style>
